<script setup lang="ts">
import {ref} from 'vue';
import { IotApi, ReturnObject } from '../js/apis';
import * as atom from '../js/atom';
import router  from '../router/index';
import '../assets/main.css';

const user_name= ref('');
const password = ref('');

function doLogin(){
    if(!(atom.okstr(user_name.value) && atom.okstr(password.value))){
        var controls = document.getElementsByName('user_name');
        controls[0].focus();
        alert('请输入有效的用户名和密码');
    }
    IotApi.login(user_name.value, password.value).then(
        function fulfilled(value: ReturnObject){
            if(value.code==0){
                router.push('/');
            }else{
                alert(value.msg);
            }
        },
        function onrejected(reason: any){
            alert(reason);
        }
    ).catch(function onrejected(reason: any){
        alert(reason);
    })
}
</script>

<template>
<div class="client-div">
    <div>
        <img class="logo-img" src="../assets/logo.jpg">
    </div>
    <div>
        <input type="text" name="user_name" placeholder="用户名" v-model="user_name" >
    </div>
    <div>
        <input type="password" name="password" placeholder="密码" v-model="password">
    </div>
    <div>
        <button class="btn" @click="doLogin">登录</button>
    </div>
</div>
</template>

<style scoped>
tr{
    height: 2rem;
    align-items: center;
}

.client-div{
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.logo-img{
    display: block;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 5rem;
    height: 5rem;
    margin: 20px;        
}



.btn{
    border-radius: 0.2rem;
    width: 5rem;
    height: 1.5rem;
    background-color: #F59B22;
    border: none;
    color: white;
    margin-top: 1rem;
    font-size: medium;
}

input{
    outline: none;
    border: 1px solid  #F59B22;
    border-radius: 3px;
    height: 1.2rem;
    margin-top: 1rem;
}

</style>